<!DOCTYPE html>
<html>
<head>
	<title>Navigation</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlxtabbar.css"/>
	<script src="../../../codebase/dhtmlxtabbar.js"></script>
	<script>
		var myTabbar;
		function doOnLoad() {
			myTabbar = new dhtmlXTabBar({
				parent: "my_tabbar",
				tabs: [
					{id: "a1", text: "Tab 1", active: 1},
					{id: "a2", text: "Tab 2"},
					{id: "a3", text: "Tab 3"},
					{id: "a4", text: "Tab 4"},
					{id: "a5", text: "Tab 5"}
				]
			});
		}
	</script>
	
</head>
<body onload="doOnLoad();">
	<div id="my_tabbar" style="width:495px; height:190px;"></div>
	
	<br>
	
	<input type="Button" value="Prev" onclick="myTabbar.goToPrevTab();">
	<input type="Button"  value="Current" onclick="alert(myTabbar.getActiveTab());">
	<input type="Button" value="Next" onclick="myTabbar.goToNextTab();">
	
	<br><br>
	
	<select id="sel">
		<option value="a1">a1</option>
		<option value="a2">a2</option>
		<option value="a3">a3</option>
		<option value="a4">a4</option>
		<option value="a5">a5</option>
	</select>
	<input type="Button" value="Set active tab" onclick="myTabbar.tabs(document.getElementById('sel').value).setActive();">
	
</body>
</html>

